<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>加载静态图片地图</title>
    <link rel="stylesheet" href="../v6.4.3/css/ol.css">
  </head>
  <body>
    <div id="map" style="height: 500px;"></div>

    <script src="../v6.4.3/build/ol.js"></script>
    <script>

      var extent = [0, 0, 418, 600]
      var projection = new ol.proj.Projection({
        code: 'xkcd-image',
        units: 'pixels',
        extent: extent
      })

      //地图图层
      var imageLayer = new ol.layer.Image({
        source: new ol.source.ImageStatic({
          url: './image/20170220113512_yinaE.jpeg',
          projection: projection,
          imageExtent: extent
        })
      })
      var mapView = new ol.View({
        projection: projection,
        center: ol.extent.getCenter(extent),
        zoom: 2,
        maxZoom: 8,
        extent: extent  //不让拖动出地图范围
      })
      var map = new ol.Map({
        layers: [ imageLayer ],
        target: 'map',
        view: mapView,
        controls: ol.control.defaults().extend([
          new ol.control.ZoomSlider(), //滑块缩放控件
          new ol.control.FullScreen(), //全屏控件
          new ol.control.MousePosition(), //坐标拾取控件
        ])
      })

    </script>
  </body>
</html>
